<template>
    <div>
        <el-form style="max-width: 600px" :rules="rules" :model="ruleForm" ref="ruleFormRef" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item prop="checked">
                <el-checkbox v-model="ruleForm.checked">
                    记住我
                </el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="toGitee">gitee第三方登录</el-button>
    </div>
</template>
<script setup>
import axios from 'axios'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = reactive({
    username: '',
    password: '',
    checked: [],
})
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 5, message: '输入内容在3到5个字之间', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 3, max: 5, message: '输入内容在3到5个字之间', trigger: 'blur' },
    ],
    checked: [
        {
            type: 'array',
            required: true,
            message: '请选择复选框',
            trigger: 'change',
        },
    ],
})
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post('/api/login', ruleForm).then(res => {
                localStorage.setItem('username', res.data.data.username)
                localStorage.setItem('token', res.data.data.token)
                router.push({
                    path: '/'
                })
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const toGitee = () => {
    window.open('https://gitee.com/oauth/authorize?client_id=4864241bd37be4d8ac350f602f04d41c9a6f67fe197e3a1bbca6dbacdd6df555&redirect_uri=http://localhost:5173/oauth/lzd&response_type=code')

}
</script>
